{% extends "base.html" %}
{% from "macros/widgets.html" import accordion_item %}

{% block content %}
  <div class="jumbotron">
    <div class="container">
      <h1>{{ user.name }}</h1>
      <h1>
        <a href="{{ url_for("pwncollege_belts.view_belts") }}">
          {% if belts.users[user.id] %}
          <span title="Earned on {{belts.users[user.id].date}}">
            <img src="{{ url_for("views.themes", path="img/dojo/"+belts.users[user.id].color+".png") }}", class="scoreboard-belt">
          </span>
          {% else %}
          <img src="{{ url_for("views.themes", path="img/dojo/white.png") }}" class="scoreboard-belt">
          {% endif %}
        </a>
      </h1>
      <h2>
        {% for badge in badges[user.id] %}
        <span title="{{badge.text}}">
          <a href="{{badge.url}}">
            <img src="{{ url_for("views.themes", path="img/dojo/"+badge.emoji+".svg") }}" class="scoreboard-belt">
          </a>
          </span><span>
        </span>
        {% endfor %}
      </h2>


      {% if user.affiliation %}
        <h3 class="d-inline-block">
          <span class="badge badge-primary">{{ user.affiliation }}</span>
        </h3>
      {% endif %}

      {% if user.country %}
        <h3 class="d-inline-block">
          <span class="badge badge-primary">
            <i class="flag-{{ user.country.lower() }}"></i>
            {{ lookup_country_code(user.country) }}
          </span>
        </h3>
      {% endif %}

      {% for field in user.fields %}
        <h3 class="d-block">
          {{ field.name }}: {{ field.value }}
        </h3>
      {% endfor %}

      <div class="pt-3">
        {% if user.website %}
          <a href="{{ user.website }}" target="_blank" style="color: inherit;" rel="noopener">
            <i class="fas fa-external-link-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
               title="{{ user.website }}"></i>
          </a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="container">
    {% for dojo in dojos if dojo_scores.user_ranks[user.id] and dojo_scores.user_ranks[user.id][dojo.id] %}
      {% set rank = dojo_scores.user_ranks[user.id][dojo.id] %}
      {% set max_rank = dojo_scores.dojo_ranks[dojo.id] | length %}
      {% set solves = dojo_scores.user_solves[user.id][dojo.id] %}
      <a class="text-decoration-none" href="{{ url_for('pwncollege_dojo.listing', dojo=dojo.reference_id) }}">
        <h2>{{ dojo.name }}</h2>
        <h4>
          <i class="fas fa-flag pt-3 pr-3" title="Solves"></i>
          <td>{{ solves }} / {{ dojo.challenges | length }}</td>
          <i class="fas fa-trophy pt-3 pr-3 pl-5 " title="Rank"></i>
          <td>{{ rank or "-" }} / {{ max_rank or "-" }}</td>
        </h4>
      </a>

      <br>

      <div class="accordion" id="modules-{{dojo.hex_dojo_id}}">
        {% for module in dojo.modules %}
          {% set solves = module_scores.user_solves[user.id][dojo.id][module.module_index] %}
          {% set rank = module_scores.user_ranks[user.id][dojo.id][module.module_index] %}
          {% set max_rank = module_scores.module_ranks[dojo.id][module.module_index] | length %}
          {% call(header) accordion_item("modules-{}".format(dojo.hex_dojo_id), loop.index) %}
            {% if header %}
              <h4 class="accordion-item-name">{{ module.name }}</h4>
              <span class="total-solves">
                <i class="fas fa-flag pr-1" title="Solves"></i>
                <td>{{ solves }} / {{ module.challenges | length }}</td>
                <i class="fas fa-trophy pr-1 pl-3 " title="Rank"></i>
                <td>{{ rank or "-" }} / {{ max_rank or "-" }}</td>
              </span>
            {% else %}
              {% if module.challenges %}
                {% for challenge in module.challenges %}
                {% set solved = "challenge-solved" if dojo.id in user_solves and module.id in user_solves[dojo.id] and challenge.challenge_id in user_solves[dojo.id][module.id] else "challenge-unsolved" %}
                    {% if solved == "challenge-solved" %}
                    <div class="challenge-row">
                      <div class="challenge-info">
                      <h4>
                        <span class="d-sm-block d-md-block d-lg-block">
                          <i class="fas fa-flag pr-3 {{ solved }}"></i>{{ challenge.name or challenge.id }}
                          {% if not challenge.visible() %}
                          <small><small><small>
                                <i>hidden</i> &mdash; you can see this because you are this dojo's administrator
                          </small></small></small>
                          {% endif %}
                        </span>
                      </h4>
                      <h6>首次成功提交时间：{{user_solves[dojo.id][module.id][challenge.challenge_id]}}</h6>
                      </div>
                      <div class="rating-container">
                        {% if challenge.data.level %}
                        <span id="rating-{{ challenge.challenge_id }}" class="rating" data-level="{{ challenge.data.level }}" style="padding-right: 5px; margin-right: 5px; color: #b5e853; font-size: 25px;">
                          {% set levelStr = challenge.data.level %}
                          {% set level = levelStr|int %}
                        </span>
                        {% endif %}
                      </div>
                    </div>
                    <br>
                    {% else %}
                    {% endif %}
                {% endfor %}
              {% else %}
              {% endif %}
            {% endif %}
          {% endcall %}
        {% endfor %}
      </div>
      <script>
        const getStar = (rate) => '★★★★★★★★★★☆☆☆☆☆☆☆☆☆☆'.slice(10-rate, 20-rate);
        document.addEventListener('DOMContentLoaded', function() {
          const ratings = document.querySelectorAll('.rating');
          ratings.forEach(function(rating) {
            const level = parseInt(rating.dataset.level);
            rating.innerText = getStar(level);
          });
        });
      </script>
      <style>
        .challenge-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px 0;
        }

        .challenge-info {
          flex: 1;
        }

        .rating-container {
          white-space: nowrap;
          text-align: right;
        }
      </style>
      <br>
    {% endfor %}
{% endblock %}
